<template>
	<view class="">


		<view class="hulu-bill-card" v-for="(d,ind) in data" :key="ind">
			<view class="" v-if="d.ticket">
				<view v-if="d.state==4 && d.ticket.ticket_type==1">
					 
					<image src="../../static/assets/complete.png" mode="top" style="width: 200rpx;height: 200rpx;" class="chapter-complete"></image>
				</view>
				<view v-if="d.state==5 && d.ticket.ticket_type==2">
					<image src="../../static/assets/complete.png" mode="aspectFit" style="width: 200rpx;height: 200rpx;" class="chapter-complete"></image>
				</view>
			</view>
			
			<view class="bill-head">
				<view class="head-title hulu-text-color2 hulu-text-color4 hulu-font-5 gui-flex">
					编号:{{d.order_no}}
					<view class="" v-if="d.ticket">
						<text v-if="d.ticket.ticket_type==1">正常</text>
						<text class="hulu-btn-text-color" style="font-weight: bolder;"
							v-if="d.ticket.ticket_type==2">异常</text>
					</view>
				</view>
				<view class="head-state hulu-font-5 hulu-text-state1">
					<view class="" v-if="d.state==0">
						未派单
					</view>
					<view class="" v-if="d.ticket">
						<view class="" v-if="d.ticket.ticket_type==1">
							<text v-if="d.state==1">
								已派单
							</text>
							<text v-if="d.state==2">
								已签字
							</text>
							<text v-if="d.state==3">
								班长确认
							</text>
							<text v-if="d.state==4">
								完结
							</text>
						</view>
						<view class="" v-if="d.ticket.ticket_type==2">
							<text v-if="d.state==1">
								已派单
							</text>
							<text v-if="d.state==2">
								已签字
							</text>
							<text v-if="d.state==3">
								班长确认
							</text>
							<text v-if="d.state==4">
								作业长确认
							</text>
							<text v-if="d.state==5">
								完结
							</text>
						</view>
					</view>

				</view>
			</view>

			<view class="bill-content">
				<view class="" style="height:24rpx;">

				</view>
				<view class="bill-content-main">
					<view class="content-img" v-if="d.images&&d.images.length>0">
						<image :src="d.images[0]" mode="aspectFill" style="width:144rpx;height:144rpx;"></image>
					</view>
					<view class="content-feather hulu-font-5">
						<view v-if="d.ticket" v-for="(s,index) in d.ticket.services" :key="index">
							<view class="hulu-text-warning"
								v-if="d.ticket.add_services_ids && d.ticket.add_services_ids.includes(s.id)">
								{{s.name}}x️1【添】
							</view>
							<view v-else>
								{{s.name}}x️1
							</view>
						</view>
					</view>
					<view class="content-price">
						<view class="">
							<view class="hulu-text-color3" v-if="d.ticket" v-for="(u,idx) in d.ticket.users" :key="idx">
								<view class="hulu-text-warning"
									v-if="d.ticket.add_users_ids && d.ticket.add_users_ids.includes(u.id)">
									{{u.name}}【添】
								</view>
								<view v-else>
									{{u.name}}
								</view>

							</view>
						</view>
					</view>

				</view>
				<view class="" style="height:24rpx;">

				</view>
				<view class="bill-divider">
				</view>
			</view>
			<view class="" style="height:12rpx;">

			</view>
			<view class="bill-footer">
				<view class="footer-btns">

					<view class="" style="width:8rpx;">

					</view>
					<view class="btn-cancel" hover-class="gui-tap" @tap="toDetail(d)">
						<view>
							详情
						</view>
					</view>
				</view>
				<view class="" style="width:15rpx;">

				</view>
				<view class="footer-pay-info">
					<view class="pay-cut" v-if="d.way==1&&d.ticket">
						<up-icon name="car"></up-icon>{{d.ticket.parking.parking_type}}{{d.ticket.parking.no}}
					</view>
					<view class="pay-cut" v-if="d.way==2&&d.ticket">
						<up-icon name="map"></up-icon>{{d.address}}
					</view>
					<view class="hulu-text-color2 hulu-font-5 gui-flex" style="text-align: left;" hover-class="gui-tap">
						<up-icon name="clock"></up-icon>{{d.created_at}}
					</view>
					<view class="pay-total">
						<text class="pay-price">
							{{d.license}}
						</text>
					</view>
				</view>
			</view>
		</view>
		<view class="" v-if="data.length==0">
			<up-empty mode="data">
			</up-empty>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			repairs: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				data: []
			}
		},
		mounted() {
			this.data = this.repairs
		},
		watch: {
			repairs(newData, oldCount) {
				this.data = newData
			}
		},
		methods: {
			hasPers(...rs) {
				return this.$hasPers(...rs);
			},
			toSign(repair) {
				let id = repair.ticket.id
				uni.navigateTo({
					url: `/subpage/ticket/sign?id=${id}`
				})
			},
			toDispatch(repair) {
				let id = repair.id
				uni.navigateTo({
					url: `/subpage/ticket/dispatch?id=${id}`
				})
			},
			toPass(repair) {
				let id = repair.ticket.id
				uni.navigateTo({
					url: `/subpage/ticket/pass?id=${id}`
				})
			},
			toAbNormal(repair) {
				let id = repair.ticket.id
				uni.navigateTo({
					url: `/subpage/ticket/abnormal?id=${id}`
				})
			},
			toConfirm(repair) {
				let id = repair.ticket.id
				uni.navigateTo({
					url: `/subpage/ticket/confirm?id=${id}`
				})
			},
			toDetail(repair) {
				if (!repair.ticket) {
					return uni.showToast({
						icon: "none",
						title: "尚未派单"
					})
				}
				let id = repair.ticket.id

				uni.navigateTo({
					url: `/subpage/ticket/detail?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hulu-bill-card {
		width: 702rpx;
		background-color: white;
		border-radius: 10rpx;
		box-sizing: border-box;
		padding: 24rpx;
		position: relative;
		margin-bottom: 24rpx;

		.chapter-complete {
			position: absolute;
			right: 10rpx;
			bottom: 12rpx;
			width: 200rpx;
			height: 200rpx;
		}

		.bill-head {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.bill-content {
			.bill-content-main {
				display: flex;
				justify-content: space-between;

				.content-img {
					width: 144rpx;
					height: 144rpx;
					border-radius: 24rpx;
				}

				.content-feather {
					min-width: 300rpx;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: flex-start;
				}

				.content-price {
					min-width: 120rpx;
					display: flex;
					flex-direction: column;
					flex-wrap: wrap;
					font-size: 22rpx;
					width: 144rpx;
				}
			}

			.bill-divider {
				width: 100%;
				height: 2rpx;
				background-color: #EEEEEE;
			}
		}

		.bill-footer {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.footer-btns {
				display: flex;
				font-size: 28rpx;

				.btn-confirm,
				.btn-cancel {
					width: 168rpx;
					height: 68rpx;
					box-sizing: border-box;
					border: 2rpx solid #0772EC;
					border-radius: 34rpx;
					line-height: 68rpx;
					text-align: center;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.btn-confirm {
					background-color: #0772EC;
					color: white;
				}

				.btn-cancel {
					background-color: #FF6E40;
					border: 2rpx solid #DDDDDD;
					color: #DDDDDD;
				}
			}

			.footer-pay-info {
				width: 320rpx;
				text-align: right;

				.pay-cut {
					display: flex;
					font-size: 24rpx;
					white-space: nowrap;
					width: 300rpx;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.pay-total {
					font-size: 32rpx;

					.pay-price {
						font-weight: bold;
						color: black;
					}
				}
			}
		}

		.btn-forbidden {
			background-color: #ddd !important;
			border: 2rpx solid #DDDDDD !important;
			color: #999;

			&::before {
				background-color: #ddd !important;
				border: none !important;
				color: #999;
			}

			&::after {
				border: 2rpx solid #DDDDDD !important;
				color: #999;
			}
		}

		.btn-success {
			background-color: #52C41A !important;
			border: 2rpx solid white !important;

			&::before {
				background-color: white !important;
				border: none !important;
			}

			&::after {
				border: 2rpx solid white !important;
			}
		}
	}
</style>